<template>
  <div>
    <div class="pl10 pr10">
      <a-tabs v-model="tab">
        <a-tab-pane :key="1" tab="某某表单名称"></a-tab-pane>
        <a-tab-pane :key="2" tab="某某表单名称"></a-tab-pane>
        <a-tab-pane :key="3" tab="某某表单名称"></a-tab-pane>
        <div slot="tabBarExtraContent" class="flx-e">
          <ZgSwitch class="pos-rlt t10" v-if="hasPdf" :width="80" v-model="showForm" :text="['表单视图', 'PDF视图']"></ZgSwitch>
        </div>
      </a-tabs>
      <a-row :gutter="10">
        <a-col :span="21">
          <Pdf v-if="!showForm"></Pdf>
          <div v-else>
            <Readonly v-if="hasPdf"></Readonly>
            <div v-else style="background:#f6f6f6">
              <ZgForm :columns="columns"></ZgForm>
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <ZgDataSelect></ZgDataSelect>
          <ZgDataSelect></ZgDataSelect>
          <a-button type="default" v-if="showForm&&!hasPdf" class="wfull mb10"><i class="fa fa-file-text-o mr5"/>保存草稿</a-button>
          <a-button type="primary" v-if="showForm&&!hasPdf" class="wfull mb10" @click="save"><i class="fa fa-save mr5"/>保存单据</a-button>
          <a-button type="primary" v-if="hasPdf" class="wfull mb10" @click="reEdit"><i class="fa fa-edit mr5"/>重新编辑</a-button>
          <a-button type="primary" v-if="showForm&&hasSave&&!hasPdf" class="wfull mb10" @click="createPdf"><i class="fa fa-file mr5"/>生成文件</a-button>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import Pdf from './Pdf'
import Readonly from './Readonly'
export default {
  components: {
    Pdf, Readonly
  },
  data () {
    return {
      tab: 1,
      showForm: true,
      hasSave: false,
      hasPdf: false,
      layout: {
        标签对齐: 'right',
        标签宽度: 100,
        左右间距: 10,
        上下间距: 10,
        视图边距: 10
      },
      columns: [
        { name: '头像', code: 'head', compType: '图片', isNeed: true, offset: 0, span: 24, defaultVal: '' },
        { name: '性别', code: 'sex', compType: '字典', isNeed: true, offset: 0, span: 24, defaultVal: '1', extra: { 字典类型: 'sex' } },
        { name: '下拉选择', code: 'select', compType: '下拉选择', isNeed: true, offset: 0, span: 24, defaultVal: '1', extra: { 下拉选项: [{ value: '1', label: '男' }, { value: '2', label: '女' }] } },
        { name: '姓名', code: 'name', compType: '单行文本', isNeed: true, offset: 0, span: 24, defaultVal: 'zxb', regex: '', errorMsg: '' },
        { name: '简介', code: 'intro', compType: '多行文本', isNeed: true, offset: 0, span: 24, defaultVal: '', extra: { 行数: 3 } },
        { name: '个人经历', code: 'info', compType: '富文本', isNeed: true, offset: 0, span: 24, defaultVal: '', extra: { 高度: 400 } },
        { name: '年龄', code: 'age', compType: '整数', isNeed: true, offset: 0, span: 24, defaultVal: 0 },
        { name: '分数', code: 'score', compType: '浮点数', isNeed: true, offset: 0, span: 24, defaultVal: 0 },
        { name: '是否测试账号', code: 'is_test', compType: '单选框', isNeed: true, offset: 0, span: 24, defaultVal: false },
        { name: '政治面貌', code: 'political', compType: '多选', isNeed: true, offset: 0, span: 24, defaultVal: '', extra: { 字典类型: 'political' } },
        { name: '是否启用', code: 'is_use', compType: '开关', isNeed: true, offset: 0, span: 24, defaultVal: false },
        { name: '生日', code: 'birth', compType: '日期', isNeed: true, offset: 0, span: 24, defaultVal: '2025-05-22' },
        { name: '最后登录时间', code: 'last_login_time', compType: '日期时间', isNeed: true, offset: 0, span: 24, defaultVal: '2025-05-22 12:00:00' }
      ]
    }
  },
  methods: {
    save () {
      this.hasSave = true
    },
    reEdit () {
      this.hasPdf = false
      this.showForm = true
    },
    createPdf () {
      this.hasPdf = true
      this.showForm = false
    }
  }
}
</script>

<style scoped>

</style>
